<template>
  <div class="divisional">
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="inputBox">
          <div class="v_box" v-for="(item,index) in list_1" :key="index">
            <label for>{{item.name}}</label>
            <el-input v-model="item.input_val" size="small" placeholder="请输入内容"></el-input>
          </div>
          <div class="v_box">
            <label for>是否首次逾期</label>
            <el-select v-model="isFirstIssue" size="small" placeholder="请选择">
              <el-option
                v-for="item in yuqiOptions"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="v_box">
            <label for>催收次数</label>
            <el-input v-model="cuishouNum" size="small" placeholder="请输入内容"></el-input>
          </div>
          <div class="v_box">
            <label for>催收方式</label>
            <el-select v-model="outbound" size="small" placeholder="请选择">
              <el-option
                v-for="item in outboundOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="v_box">
            <label for>风险等级</label>
            <el-select v-model="risklevel" size="small" placeholder="请选择">
              <el-option
                v-for="item in risklevelOptions"
                :key="item.index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div class="v_box">
            <label for>逾期等级</label>
            <div>
              <el-select v-model="overdueLevelF" size="small" placeholder="请选择">
                <el-option
                  v-for="item in overdueLevelOptions"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
              <span>- -</span>
              <el-select v-model="overdue_levelS" size="small" placeholder="请选择">
                <el-option
                  v-for="item in overdueLevelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <div class="v_box"></div>
          <div class="v_box">
            <el-button size="small" type="primary" @click="checkInfo">查询</el-button>
            <el-button size="small" type="primary" @click="reset">重置</el-button>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table
          :data="tableData"
          :header-cell-style="{background:'LightYellow	',color:'black'}"
          max-height="400"
          style="width: 100%"
        >
          <el-table-column prop="serialNumber" label="案件流水号" width></el-table-column>
          <el-table-column prop="bank" label="所属银行" width></el-table-column>
          <el-table-column prop="customerId" label="客户号"></el-table-column>
          <el-table-column prop="contractNum" label="贷款合同号"></el-table-column>
          <el-table-column prop="peopleId" label="身份证号"></el-table-column>
          <el-table-column prop="isFirstIssue" label="是否首次逾期"></el-table-column>
          <el-table-column prop="collectionTimes" label="催收次数"></el-table-column>
          <el-table-column prop="riskLevel" label="风险等级"></el-table-column>
          <el-table-column prop="overdueLevelF" label="逾期等级"></el-table-column>
          <el-table-column prop="outbound" label="催收方式"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15,20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="isInfodetail" width="30%">
      <span slot="title">催收方式</span>
      <div class="mainInfoBox">
        <el-radio-group v-model="radio">
          <el-radio :label="1">短信</el-radio>
          <el-radio :label="2">智能</el-radio>
          <el-radio :label="3">人工</el-radio>
        </el-radio-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isInfodetail = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Message } from "element-ui";
export default {
  data() {
    return {
      radio: "",
      isInfodetail: false,
      currentPage: 1,
      total: 0,
      pageSize: 5,
      list_1: [
        {
          name: "所属银行",
          input_val: "",
        },
        {
          name: "身份证号",
          input_val: "",
        },
        {
          name: "贷款合同号",
          input_val: "",
        },
        {
          name: "客户号",
          input_val: "",
        },
        {
          name: "手机号",
          input_val: "",
        },
      ],
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      tableData: [
        {
          serialNumber: "123123",
          bank: "广发银行",
          customerId: "上海市普陀区金沙江路 1518 弄",
          contractNum: "贷款合同号",
          peopleId: "身份证号",
          isFirstIssue: "是否首次预期",
          collectionTimes: "催收次数",
          riskLevel: "风险等级",
          overdueLevelF: "逾期等级",
          outbound: "催收方式",
        },
        {
          serialNumber: "123123",
          bank: "广发银行",
          customerId: "上海市普陀区金沙江路 1518 弄",
          contractNum: "贷款合同号",
          peopleId: "身份证号",
          isFirstIssue: "是否首次预期",
          collectionTimes: "催收次数",
          riskLevel: "风险等级",
          overdueLevelF: "逾期等级",
          outbound: "催收方式",
        },
        {
          serialNumber: "123123",
          bank: "广发银行",
          customerId: "上海市普陀区金沙江路 1518 弄",
          contractNum: "贷款合同号",
          peopleId: "身份证号",
          isFirstIssue: "是否首次预期",
          collectionTimes: "催收次数",
          riskLevel: "风险等级",
          overdueLevelF: "逾期等级",
          outbound: "催收方式",
        },
        {
          serialNumber: "123123",
          bank: "广发银行",
          customerId: "上海市普陀区金沙江路 1518 弄",
          contractNum: "贷款合同号",
          peopleId: "身份证号",
          isFirstIssue: "是否首次预期",
          collectionTimes: "催收次数",
          riskLevel: "风险等级",
          overdueLevelF: "逾期等级",
          outbound: "催收方式",
        },
        {
          serialNumber: "123123",
          bank: "广发银行",
          customerId: "上海市普陀区金沙江路 1518 弄",
          contractNum: "贷款合同号",
          peopleId: "身份证号",
          isFirstIssue: "是否首次预期",
          collectionTimes: "催收次数",
          riskLevel: "风险等级",
          overdueLevelF: "逾期等级",
          outbound: "催收方式",
        },
        {
          serialNumber: "123123",
          bank: "广发银行",
          customerId: "上海市普陀区金沙江路 1518 弄",
          contractNum: "贷款合同号",
          peopleId: "身份证号",
          isFirstIssue: "是否首次预期",
          collectionTimes: "催收次数",
          riskLevel: "风险等级",
          overdueLevelF: "逾期等级",
          outbound: "催收方式",
        },
      ],
      //   逾期选择
      isFirstIssue: "",
      yuqiOptions: [
        {
          label: "是",
          value: 1,
          index: 0,
        },
        {
          label: "否",
          value: 0,
          index: 1,
        },
      ],
      //   催收
      cuishouNum: "",
      //   催收方式
      outbound: "",
      outboundOptions: [
        //    1短信 2智能 3人工
        {
          label: "短信",
          value: "1",
        },
        {
          label: "智能",
          value: "2",
        },
        {
          label: "人工",
          value: "3",
        },
      ],
      //   风险等级
      risklevel: "",
      risklevelOptions: [
        {
          label: "高风险",
          value: "高风险",
          index: 1,
        },
        {
          label: "中风险",
          value: "中风险",
          index: 2,
        },
        {
          label: "低风险",
          value: "低风险",
          index: 3,
        },
      ],
      //   逾期等级
      overdueLevelF: "",
      overdue_levelS: "",
      overdueLevelOptions: [
        {
          label: "M1",
          value: "M1",
          index: 1,
        },
        {
          label: "M2",
          value: "M2",
          index: 2,
        },
        {
          label: "M3",
          value: "M3",
          index: 3,
        },
      ],
      //   详情
      detailInfo: [],
    };
  },
  created() {
    this.checkInfo();
  },
  methods: {
    handleCurrentChange(data) {
      this.currentPage = data;
      this.checkInfo();
    },
    handleSizeChange(data) {
      console.log(data, "handleSizeChange");
      this.pageSize = data;
      this.checkInfo();
    },
    handleInfoDetail(val) {
      switch (val) {
        case "phoneNum":
          return "手机号";
        case "riskLecvel":
          return "风险等级";
        case "serialNumber":
          return "案件流水号";
        case "bank":
          return "所属银行";
        case "customerId":
          return "客户号";
        case "contractNum":
          return "贷款合同号";
        case "peopleId":
          return "身份证号";
        case "isFirstIssue":
          return "逾期次数";
        case "collectionTimes":
          return "催收次数";
        case "riskLevel":
          return "风险等级";
        case "overdueLevelF":
          return "逾期等级";
        case "outbound":
          return "下方方向";
        case "id":
          return "ID";
        case "receiptNum":
          return "贷款借据号";
        case "name":
          return "姓名";
        case "age":
          return "年龄";
        case "sex":
          return "性别";
        case "education":
          return "学历";
        case "maritalStatus":
          return "婚姻状况";
        case "overdueAmount":
          return "逾期金额";
        case "overdueDay":
          return "逾期天数";
        case "overduePrincipal":
          return "逾期本金";
        case "productName":
          return "产品名称";
        case "applicationTime":
          return "申请时间";
        case "lateCharge":
          return "逾期罚息";
        case "customerLabel":
          return "客群细分标签";
        case "repaymentNum":
          return "还款账号";
        case "collectionPriority":
          return "催收优先等级";
        case "interestRefund":
          return "退罚息";
        case "newAndOldLoansn":
          return "新老网贷";
        case "score":
          return "评分";
        case "state":
          return "状态";
        case "dataTime":
          return "数据时间";
        case "division":
          return "division";
        case "repaymentAmount":
          return "还款金额";
        case "repaymentDate":
          return "还款时间";
        case "scriptTemplate":
          return "话术模板";
        default:
          return val;
      }
    },
    handleClick(data) {
      console.log(data, "sss");
      this.detailInfo.splice(this.detailInfo.length);
      this.detailInfo = this.outboundOptions;
      this.isInfodetail = true;
    },
    reset() {
      this.list_1[0].input_val = "";
      this.list_1[1].input_val = "";
      this.list_1[2].input_val = "";
      this.list_1[3].input_val = "";
      this.list_1[4].input_val = "";
      this.isFirstIssue = "";
      this.outbound = "";
      this.risklevel = "";
      this.overdueLevelF = "";
      this.overdue_levelS = "";
    },
    checkInfo() {
      //   所属银行
      let bank = this.list_1[0].input_val;
      // 身份证
      let peopleId = this.list_1[1].input_val;
      // 贷款合同号
      let contractNum = this.list_1[2].input_val;
      // 客户号
      let customerId = this.list_1[3].input_val;
      // s手机号
      let phone = this.list_1[4].input_val;
      // 是否逾期
      let isFirstIssue = this.isFirstIssue;
      //   催收次数
      let collectionTimes = this.cuishouNum;
      //   催收方式
      let outbound = this.outbound;
      //   风险等级
      let riskLevel = this.risklevel;
      //   逾期等级
      let overdueLevelF = this.overdueLevelF;
      let overdueLevelS = this.overdue_levelS;
      //   console.log(
      //     bank,
      //     peopleId,
      //     contractNum,
      //     customerId,
      //     phone,
      //     isFirstIssue,
      //     collectionTimes,
      //     outbound,
      //     riskLevel,
      //     overdueLevelf,
      //     overdue_levelS
      //   );
      let options = {
        bank: bank,
        peopleId: peopleId,
        contractNum: contractNum,
        customerId: customerId,
        phone: phone,
        isFirstIssue: isFirstIssue,
        collectionTimes: collectionTimes,
        outbound: outbound,
        riskLevel: riskLevel,
        overdueLevelF: overdueLevelF,
        overdueLevelS: overdueLevelS,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      };
      this.$axios({
        method: "post",
        url: "/search",
        data: options,
      })
        .then((res) => {
          console.log(res, "查询数据");
          if (res.data.code == 200) {
            // this.tableData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            Message.warning(res.message);
          }
        })
        .catch((err) => {});
    },
  },
};
</script>
<style lang="scss" scoped>
.divisional {
  /deep/ .el-row:nth-child(1) {
    width: 100%;
    height: 30vh;
    // background: pink;
    padding: 0;
    margin: 0;
    .el-col {
      padding: 0;
      height: inherit;
      border: 1px solid slategrey;
      box-sizing: border-box;
      overflow: hidden;
      div:nth-child(1) {
        width: 100%;
        height: inherit;
        //   background: yellowgreen;
        display: flex;
        flex-wrap: wrap;
        // justify-content: flex-start;
        justify-content: space-around;
        box-sizing: border-box;
        padding-left: 30px;
        padding-top: 10px;
        overflow-y: auto;
        .v_box {
          width: 20%;
          height: 8vh;
          margin-left: 15px;
          margin-right: 40px;
          // margin-bottom: 10px;
          // background: chocolate;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          padding: 0;
          border: none;
          div {
            padding: 0;
          }
          &:nth-child(10) {
            div {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              /deep/ .el-select {
                width: 40% !important;
              }
            }
          }
          &:nth-child(12) {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            .el-button {
              width: 70px;
              height: 30px;
              &:nth-child(1) {
                margin-right: 10px;
              }
            }
          }
        }
      }
    }
  }
  /deep/ .el-row:nth-child(2) {
    width: 100%;
    height: 60vh;
    // background: pink;
    padding: 0;
    margin: 0;
    margin-top: 10px;
    table {
      tbody {
        tr {
          td {
            .cell {
              box-sizing: border-box;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-break: normal !important;
              line-height: inherit;
              //   padding-right: 10px;
            }
          }
        }
      }
    }
  }
  .pageBox {
    display: flex;
    width: 100%;
    justify-content: center;
  }
  /deep/ .el-dialog {
    .mainInfoBox {
      width: 100%;
      height: 100px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      overflow-y: auto;
      .infoBox {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        height: 40px;
        width: 30%;
        label {
          width: 100px;
        }
        .el-input {
          flex: 1 1 auto;
        }
      }
    }
  }
}
</style>
